<template>
  <div class="synMessage">
    <div :class="noData" v-if="emptyData">
      <img :src="img" alt="" />
      <span>暂无数据</span>
    </div>
    <div class="content" v-if="haveData">
      <div class="generateContent">

        <div class="text" v-if="HISList.length!=0">
          <div class="title_">
            <span>HIS</span>
          </div>
          <div class="bottom">
            <div class="text_" v-for="(item,index) in HISList" :key="index">
              <span class="title">{{item.showName}}：</span>
              <span class="content_">{{item.fieldValue}}</span>
            </div>
          </div>
        </div>

        <div class="text" v-if="LISList.length!=0">
          <div class="title_">
            <span>LIS</span>
          </div>
          <div class="bottom">
            <div class="text_" v-for="(item,index) in LISList" :key="index">
              <span class="title">{{item.showName}}：</span>
              <span class="content_">{{item.fieldValue}}</span>
            </div>
          </div>
        </div>

        <div class="text" v-if="pathologyList.length!=0">
          <div class="title_">
            <span>病理</span>
          </div>
          <div class="bottom">
            <div class="text_" v-for="(item,index) in pathologyList" :key="index">
              <span class="title">{{item.showName}}：</span>
              <span class="content_">{{item.fieldValue}}</span>
            </div>
          </div>
        </div>

        <div class="text" v-if="adviceList.length!=0">
          <div class="title_">
            <span>医嘱</span>
          </div>
          <div class="bottom">
            <div class="text_" v-for="(item,index) in adviceList" :key="index">
              <span class="title">{{item.showName}}：</span>
              <span class="content_">{{item.fieldValue}}</span>
            </div>
          </div>
        </div>

        <div class="text" v-if="EMRList.length!=0">
          <div class="title_">
            <span>EMR</span>
          </div>
          <div class="bottom">
            <div class="text_" v-for="(item,index) in EMRList" :key="index">
              <span class="title">{{item.showName}}：</span>
              <span class="content_">{{item.fieldValue}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import api from '../../../api/synthesis/synthesis.js'
export default {
  name: "synMessage",
  props: {
    filter: String,
  },
  data() {
    return {
      img: require("../../../../images/Synthesis/icon-NoData.png"),
      noData:'noData',
      emptyData:true,
      haveData:false,
      generateData:{},
      generateList:[],
      HISList : [],   
      LISList : [],   
      pacsList : [],  
      pathologyList : [],
      adviceList : [],   
      EMRList : [],   
    };
  },
  mounted(){
    let _this = this;
    this.getGenerateInfo()
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.img = require("../../../../images/Synthesis/icon-NoData.png");
        _this.noData='noData';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.img = require("../../../../images/Synthesis/icon-NoData1.png");
        _this.noData='noData1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.img = require("../../../../images/Synthesis/icon-NoData.png");
      _this.noData='noData';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.img = require("../../../../images/Synthesis/icon-NoData1.png");
      _this.noData='noData1';
    }
  },
  methods: {
    // 排序
    sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key];
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    },
    getGenerateInfo(){
      let _this = this;
      api.getGenerateInfo(null,{filter:_this.filter}).then(res=>{
        if(res.data != null) {
          _this.emptyData = false;
          _this.haveData = true;
          if(res.code == 200) {
            _this.generateData = res.data
            _this.generateList = res.data.list  
            _this.generateList.forEach(element => {
              if(element.archivesType == 1) {
                element.archivesType = 'HIS'
                _this.HISList.push(element)
              }
              if(element.archivesType == 2) {
                element.archivesType = 'LIS'
                _this.LISList.push(element)
              }
              if(element.archivesType == 3) {
                element.archivesType = 'pacs'
                _this.pacsList.push(element)
              }
              if(element.archivesType == 4) {
                element.archivesType = '病理'
                _this.pathologyList.push(element)
              }
              if(element.archivesType == 5) {
                element.archivesType = '医嘱'
                _this.adviceList.push(element)
              }
              if(element.archivesType == 6) {
                element.archivesType = 'EMR'
                _this.EMRList.push(element)
              }
            });
            console.log(_this.HISList)
            console.log(_this.LISList)
            console.log(_this.pathologyList)
            console.log(_this.adviceList)
            console.log(_this.EMRList)
            // 根据 sortCode 排序码 排序
            _this.generateList = _this.sortByKey(_this.generateList, 'sortCode');
            _this.HISList = _this.sortByKey(_this.HISList, 'sortCode');
            _this.LISList = _this.sortByKey(_this.LISList, 'sortCode');
            _this.pathologyList = _this.sortByKey(_this.pathologyList, 'sortCode');
            _this.adviceList = _this.sortByKey(_this.adviceList, 'sortCode');
            _this.EMRList = _this.sortByKey(_this.EMRList, 'sortCode');
          }
        }else if(res.data == null) {
          _this.emptyData = true;
          _this.haveData = false;
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.synMessage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  .noData {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    z-index: 10;
    img {
      width: 75px;
      height: 95px;
    }
    span {
      font-size: 16px;
      color: #0078b6;
      line-height: 40px;
    }
  }
  .noData1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    z-index: 10;
    img {
      width: 75px;
      height: 95px;
    }
    span {
      font-size: 16px;
      color: #73777a;
      line-height: 40px;
    }
  }
  .generateContent {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 30px;
    border-radius: 8px;
    .text {
      width: 100%;
      display: flex;
      flex-direction: column;
      min-height: 160px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      .title_ {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px #ddd solid;
        span {
          margin-left: 30px;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        height: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
        .text_ {
          width: 50%;
          padding: 20px 30px;
          display: flex;
          span {
            width: 30%;
            display: flex;
            font-size: 16px;
            align-items: center;
          }
          .content_ {
            width: 70%;
          }
        }
      }
      
    }
  }
}
</style>

<style>
</style>